(function () {
  class TyphoonEyeLayer extends BaseLayer {
    constructor(config = {}) {
      super(config);
      this.minZoom = 10
      this.maxZoom = 12
      this.iconSize = .5;
      this.name =  'TyphoonEyeLayer'
      this.initLayer()
      this.imgList = [
        {
          name: 'marker',
          value: 'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
        }
      ]
      this.loadImage()
    }

    /**
     *
     * @param featrue 当前点击的feature
     * @param data 当前点击的feature data
     * @returns {string}
     */
    setTipHtml(featrue, data) {
      return `
        <div class="self_point_container"> 
            <div class="item">
                <span>名称：</span>
                <span>${data.name}</span>
            </div>
        </div>
      `
    }

    makeFeature(item) {
      let f = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [item.x, item.y]
        },
        properties: {
          icon: item.icon,
          data: item
        }
      }
      return f
    }

    async __startTyphoon() {
      // 将地图的层级调整到 看到警戒线即可
      map.setMinZoom(2)

      // 请求本地台风数据
      let d = await (await fetch('./model/typhoonData.json')).json()
      d[0].points.forEach(item => {
        item.typhoonName = d[0].name
      })
      this.typhoonData = {
        typhoonName: d[0].name,
        data: d[0].points
      }

      this.drawTyphoon()
    }

    async delay(ms) {
      return new Promise(resolve => {
        setTimeout(resolve, ms)
      })
    }

    async drawTyphoon() {
      let len = this.typhoonData.data.length
      let typhoon_point_layer = window.layerManager.get('TyphoonPointLayer')
      let typhoon_line_layer = window.layerManager.get('TyphoonLineLayer')
      let typhoon_polygon_layer = window.layerManager.get('TyphoonPolygonLayer')
      let typhoon_YuLine_layer = window.layerManager.get('TyphoonYuCeLineLayer')
      for (let i = 0; i < len; i++) {
        let item = this.typhoonData.data[i]
        await this.delay(50)
        this.drawTyphoonEye(item)
        typhoon_point_layer.loadData(item)
        typhoon_line_layer.loadData([item.lng, item.lat], i)
        typhoon_polygon_layer.loadData(item)
      }
      typhoon_YuLine_layer.loadData(this.typhoonData.data[this.typhoonData.data.length - 1])
    }

    getHtml() {
      return `
        <img src="./img/typhoon.png" class="typhoon_eye_img" /">
      `
    }

    drawTyphoonEye(item) {
      let position = [item.lng, item.lat]
      if (this.typhoonPop) {
        this.typhoonPop.setLngLat(position)
        return
      }
      this.typhoonPop = new mapboxgl.Popup({closeOnClick: false, anchor: 'bottom'})
        .setLngLat(position)
        .setHTML(this.getHtml())
        .addTo(map);
      this.typhoonPop.setOffset([0, 15])
    }

    loadData() {
      this.__startTyphoon()
    }
  }


  window.addEventListener('mapCreatedEvent', ev => {
    new TyphoonEyeLayer()
  })
})();
